<template>
	<view class="drawer-view">
		<view class="drawer-content">

			<view class="title-view">
				选择国籍
			</view>
			<scroll-view scroll-y class="scroll-view">
				<view v-for="(item, index) in dataList" :key="index" @click="onSelectEvent(item)" class="cell-view" :class="{'active': item.nationalityId == selectValue}">
					<view class="label-view">{{item.name}}</view>
					<view class="radio-view">
						<view v-if="item.flag == '10'" class="radio-text">默认</view>
						<image v-if="item.nationalityId == selectValue" src="/static/select-icon-sel.png" class="radio-image"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: String
		},
		data() {
			return {
				selectValue: '',
				dataList: []
			};
		},
		beforeMount() {
			this.selectValue = this.value || ''
			this.getNationalityPage()
		},
		methods: {
			onSelectEvent(item) {
				this.selectValue = item.nationalityId
				this.$emit('input', item.nationalityId)
				this.$emit('change', item)
			},
			async getNationalityPage() {
				const res = await uni.$api.getNationalityPage({
					pageSize: '1000',
					pageNo: 1
				})
				this.dataList = res.data.rows
				if (!this.selectValue && this.dataList.length) {
					this.selectValue = this.dataList[0].nationalityId
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.drawer-view {
		width: 100%;
		height: 100vh;
		background: rgba(6, 0, 0, 0.9);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;

		.drawer-content {
			width: calc(100% - 174upx);
			height: 100%;
			margin-left: auto;
			background: white;
			padding: 0 33upx;
			padding-top: 18upx;

			.title-view {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				font-weight: 400;
				font-size: 27rpx;
				color: #2C1101;
			}

			.scroll-view {
				width: 100%;

				.cell-view {
					width: 100%;
					padding: 27upx 0;
					@extend .row-between;

					.label-view {
						font-weight: 400;
						font-size: 29rpx;
						color: #2C1101;
					}

					.radio-view {
						@extend .row;

						.radio-text {
							font-weight: 400;
							font-size: 25rpx;
							color: #2C1101;
						}

						.radio-image {
							width: 40upx;
							height: 40upx;
							margin-left: 18upx;
						}
					}
				}

				.cell-view+.cell-view {
					border-top: 1px solid #E9E9F4;
				}
			}
		}
	}
</style>